<!-- 统一的头部组件 -->
<template>
    <!--<el-button size="small" plain="true" icon="el-icon-s-fold"></el-button>-->
    <div>
        <el-button :icon="icon" @click="changeMenuFold"></el-button>
        <el-dropdown>
      <span class="el-dropdown-link">
        管理员：admin<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
                <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        menuFoldValue: false,
        icon: 'el-icon-s-fold'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      changeMenuFold() {
        let vue = this
        if (vue.menuFoldValue) {
          vue.menuFoldValue = false
          vue.icon = 'el-icon-s-fold'
        } else {
          vue.menuFoldValue = true
          vue.icon = 'el-icon-s-unfold'
        }
        vue.$emit('menu-fold', vue.menuFoldValue)
      }
    }
  }
</script>

<style scoped>
    .el-dropdown {
        vertical-align: top;
        float: right;
        margin-top: 20px;
    }

    .el-dropdown-link {
        cursor: pointer;
    }
</style>
